<template>
  <div class="manage-container">
    <div class="manage-left">
      <div class="manage-content">
        <div class="category-header">
          <div ref="category" class="category" />
        </div>
        <div class="category-list scroller">
          <div v-for="(item, i) in category" :key="i" class="category-item" :class="{active: i===activeNode}" @click="getColumnNode(i, item)">
            <div class="title">{{ item.channelName }}</div>
            <myprogress :num="item.count" :sum="Math.floor(category[0].count * 1.25)" />
          </div>
        </div>
      </div>
    </div>
    <div class="manage-right">
      <div class="top">
        <div ref="yearChart" class="year-chart" />
      </div>
      <div class="bottom">
        <div ref="terminfoChart" class="terminfo-chart" />
      </div>
    </div>
  </div>
</template>

<script>
import myprogress from '@/components/Progress'
import { terminfoMap } from '@/utils/dictionary'

export default {
  components: {
    myprogress
  },
  data() {
    return {
      categoryOptions: {
        grid: [{
          width: '38%', height: '38%'
        }],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [],
            textStyle: {
              color: 'rgba(0, 0, 0, 0.6)'
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(0, 0, 0, 0.3)'
              }
            }
          }
        ]
      },
      yearOptions: {
        xAxis: {
          data: []
        },
        yAxis: {},
        tooltip: {},
        legend: {
          data: ['参课人数']
        },
        series: [{
          name: '参课人数',
          type: 'line',
          data: []
        }]
      },
      terminfoOptions: {
        xAxis: {
          data: []
        },
        yAxis: {},
        tooltip: {},
        legend: {
          data: ['参课人数']
        },
        series: [{
          name: '参课人数',
          type: 'line',
          data: []
        }]
      },
      category: [],
      activeNode: 0,
      categoryPie: null,
      yearChart: null,
      terminfoChart: null
    }
  },
  created() {
    this.initColumnData()
  },
  methods: {
    // 获取课程分类不同时期参课人数
    async getCategoryPerson(categoryId) {
      const res = await this.$api.getCategoryPerson(categoryId)
      if (res && res.code === 200) {
        const categoryYear = res.data.categoryYear
        this.yearOptions.xAxis.data = []
        this.yearOptions.series[0].data = []
        Object.keys(categoryYear).forEach(key => {
          this.yearOptions.xAxis.data.push(key)
          this.yearOptions.series[0].data.push(categoryYear[key])
        })
        this.initYearChart()
      }
    },
    // 获取课程分类不同时期参课人数
    async getTerminfoPerson(categoryId) {
      const res = await this.$api.getTerminfoPerson(categoryId)
      if (res && res.code === 200) {
        const terminfoData = res.data.terminfoData
        this.terminfoOptions.xAxis.data = []
        this.terminfoOptions.series[0].data = []
        Object.keys(terminfoData).forEach(key => {
          this.terminfoOptions.xAxis.data.push(terminfoMap[key - 1])
          this.terminfoOptions.series[0].data.push(terminfoData[key])
        })
        this.initTerminfoChart()
      }
    },
    // 获取栏目信息
    async initColumnData() {
      const res = await this.$api.getColumnData()
      if (res && res.code === 200) {
        this.category = res.data.columnData
        if (this.category.length > 0) {
          this.getCategoryData(this.category[0].channelId)
        }
      }
    },
    // 获取饼图数据
    async getCategoryData(channelId) {
      const res = await this.$api.getCategoryData(channelId)
      if (res && res.code === 200) {
        const data = []
        res.data.categoryData.forEach(item => {
          if (item.count > 0) {
            const { categoryId, count, categoryName } = item
            const dict = {
              categoryId,
              value: count,
              name: categoryName
            }
            data.push(dict)
          }
        })
        this.categoryOptions.series[0].data = data
        this.initCategoryPie()
        if (data.length >= 1) {
          this.getCategoryPerson(data[0].categoryId)
          this.getTerminfoPerson(data[0].categoryId)
        }
      }
    },
    // 获取点击位置
    async getColumnNode(index, data) {
      this.activeNode = index
      if (data) {
        this.getCategoryData(data.channelId)
      }
    },
    initCategoryPie() {
      if (!this.categoryPie) {
        const categoryPie = this.$echarts.init(this.$refs.category)
        this.categoryPie = categoryPie
        categoryPie.setOption(this.categoryOptions)
        categoryPie.on('click', (params) => {
          const data = params.data
          this.getCategoryPerson(data.categoryId)
          this.getTerminfoPerson(data.categoryId)
        })
        window.addEventListener('resize', () => {
          categoryPie.resize()
        })
      } else {
        this.categoryPie.setOption(this.categoryOptions)
      }
    },
    initYearChart() {
      if (!this.yearChart) {
        const yearChart = this.$echarts.init(this.$refs.yearChart)
        this.yearChart = yearChart
        yearChart.setOption(this.yearOptions)
        window.addEventListener('resize', () => {
          yearChart.resize()
        })
      } else {
        this.yearChart.setOption(this.yearOptions)
      }
    },
    initTerminfoChart() {
      if (!this.terminfoChart) {
        const terminfoChart = this.$echarts.init(this.$refs.terminfoChart)
        this.terminfoChart = terminfoChart
        terminfoChart.setOption(this.terminfoOptions)
        window.addEventListener('resize', () => {
          terminfoChart.resize()
        })
      } else {
        this.terminfoChart.setOption(this.terminfoOptions)
      }
    },
    format(percentage) {
      return percentage
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/scrollbar.scss";
@import "@/styles/mixin.scss";

.manage-container{
  display: flex;
  height: calc(100vh - 50px);
  .manage-left{
    flex: 1;
    background: #fff;
    .manage-content{
      width: 345px;
      margin: 0 auto;
      @include borderShadow;
    }
    .category-header{
      height: 40vh;
      border-bottom: 1px solid #e7e7e7;
      .category{
        height: 240px;
      }
    }
    .category-list{
      height: 50vh;
      overflow: auto;
      padding-bottom: 10px;
    }
    .category-item{
      display: flex;
      width: 300px;
      cursor: pointer;
      margin: 0 auto;
      padding: 5px 0;
      &.active{
        border-right: 5px solid #1989fa;
        border-top: 1px solid #e3e3e3;
        border-left: 5px solid #1989fa;
        border-bottom: 1px solid #e3e3e3;
      }
      .title{
        width: 80px;
        text-align: right;
        line-height: 18px;
        font-size: 12px;
        margin-right: 5px;
      }
    }
  }
  .manage-right{
    flex: 1;
    background-color: #fff;
    @include borderShadow;
    .top{
      height: calc(50vh - 25px);
      border-bottom: 1px solid #e7e7e7;
    }
    .bottom{
      height: calc(50vh - 25px);
    }
  }
}

.year-chart, .terminfo-chart{
  width: 50vw;
  height: 260px;
}
</style>
